<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="${ pageContext.request.contextPath }/css/common.css">
    <link rel="stylesheet" href="${ pageContext.request.contextPath }/css/register.css">
    <link rel="stylesheet" href="${ pageContext.request.contextPath }/css/footer2.css">
    <link rel="stylesheet" href="${ pageContext.request.contextPath }/css/footer2.css">
    <script  type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery-1.4.2.js"></script>
    <script type="text/javascript">
    	$(function(){
			$("#valiimg").click(function(){
				//alert("click");
				$(this).attr("src","${ pageContext.request.contextPath }/index/valiImage?time="+new Date().getTime());
			});	
			//给所有输入框添加失去输入焦点的事件  当失去输入焦点时检查输入是否为空或者两次密码是否一致，或者邮箱格式是否正确。
			$("input[name='username']").blur(function(){
				//alert("...");
				if(!formobj.checkNull("username", "用户名不能为空！")){
					return false;						
				}else{
					var url="${ pageContext.request.contextPath }/admin/checkName";
					var username=$("input[name='username']").val();
					$.post(url,{"username":username},
						function(data){
							$("#username_msg").html(decodeURI(data));
						}
					);
				}
			});
			$("input[name='password']").blur(function(){
				formobj.checkNull("password", "密码不能为空！");	
				formobj.checkPassword("password","两次密码输入不一致");
			});
			$("input[name='password2']").blur(function(){
				formobj.checkNull("password2", "确认密码不能为空！");		
				formobj.checkPassword("password","两次密码输入不一致");
			});
			$("input[name='valistr']").blur(function(){
				formobj.checkNull("valistr", "验证码不能为空！");
			});
		});
    	
    	/*注册表单的js校验*/
		var formobj={
			"checkForm":function(){
				//1.非空校验				
				var res1=this.checkNull("username", "用户名不能为空！");
				var res2=this.checkNull("password", "密码不能为空！");
				var res3=this.checkNull("password2", "确认密码不能为空！");
				var res6=this.checkNull("valistr", "验证码不能为空！");
				var res7=this.checkPassword("password","两次密码输入不一致");
				return res1 && res2 && res3 && res6 && res7;				
			},
			"checkNull":function(name,msg){
				var value=$("input[name='"+name+"']").val();  
				this.setMsg(name,"");
				if(value.trim()==""){
					this.setMsg(name, msg);
					return false;
				}
				return true;
			},
			/* 设置错误提示消息  */
			"setMsg":function(name,msg){
				var $span=$("input[name='"+name+"']").nextAll("span");	
				$span.html(msg);
				$span.css("color","red");
			},
			
			//2.两次密码是否一致校验
			"checkPassword":function(name,msg){
				var pwd=$("input[name='"+name+"2']").val().trim();
				var pwd2=$("input[name='"+name+"']").val().trim();
				
			  	if( pwd!="" && pwd2!=""){
			  		//清空之前的消息。
	//				this.setMsg(name+"2","");
			  		if(pwd!= pwd2){
						this.setMsg(name+"2", msg);
						return false;
					}
			  	}
			  	return true;
			}	
		};
    </script>
</head>

<body>
    <!-- 头部logo -->
    <div id="header">
        <div class="logo">
            <a href="${ pageContext.request.contextPath }//">
                <img src="${ pageContext.request.contextPath }/images/logo.png" alt="">
            </a>
        </div>
    </div>

    <!--  中间-->
    <form action="${ pageContext.request.contextPath }/admin/regist" method="POST" id="content">
        <div class="box">
            <p class="title">注册</p>
            <p>
                <label for="">用户名</label>
                <input name="username" type="text" value="">
                <!-- <a id="nameCheck" href="javascript:void(0)" onclick="CheckEmailExit(this)" class="ml12">检查email是否已被使用</a> -->
                <span id="username_msg" class="ml12 activate_font"></span>
            </p>

            <p>
                <label for="">密&nbsp;&nbsp;码</label>
                <input name="password" type="password" placeholder="请输入密码">
                <span id="passw1_msg" class="ml12 activate_font"></span>
            </p>

            <p>
                <label for="">确认密码</label>
                <input name="password2" type="password" placeholder="请输入密码">
                <span id="passw2_msg" class="ml12 activate_font"></span>
            </p>

            <p class="code">
                <label for="">验证码</label>
                <input name="valistr" type="text">
                <img id="valiimg" src="${ pageContext.request.contextPath }/index/valiImage" />
                <!-- <a href="#">看不清，换一张</a> -->
            </p>

            <p class="jccenter">
                <button>注册</button>
            </p>
            
            <p class="activate_font">${msg }</p>
            
            <p class="jccenter"><a href="${ pageContext.request.contextPath }/index/login">已有账号，立即登录</a></p>

        </div>
    </form>


    <!--  底部-->
    <div id="footer">
        <div>版权所有© Copyright 2020-2020 书瞳　　广东省佛山市南海区华南师范大学</div>
        <div>联系我们：12345678</div>
    </div>
</body>

</html>